<template>
  <div>
    <div class="page-wrap clearBoth">
      <!--<el-pagination-->
      <!--@current-change="handleCurrentChange"-->
      <!--:current-page="pagination.currentPage"-->
      <!--:page-size="pagination.pageSize||10"-->
      <!--:small="true"-->
      <!--class="fr"-->
      <!--:count="pagination.count"-->
      <!--&gt;-->
      <!--</el-pagination>-->
      <Pagination
        class="fr pagination"
        :small="true"
        :currentPage="pagination.currentPage"
        :count="pagination.count"
        :pageSize="pagination.pageSize"
        @turnPage="handleCurrentChange"
        :totalPage="Math.ceil(pagination.count/(pagination.pageSize))"
      >
      </Pagination>
      <el-select
        v-if="pageSizeChange"
        size="mini"
        class="size-select fr"
        v-model="pagination.pageSize"
        :placeholder="$t('public.pleasePick')"
        @change="sizeSelectChange">
        <el-option
          v-for="(item,index) in size"
          :key='index'
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <!--<el-select-->
        <!--size="mini"-->
        <!--class="size-select fr"-->
        <!--v-model="pagination.pageSize"-->
        <!--:placeholder="$t('public.pleasePick')"-->
        <!--@change="sizeSelectChange">-->
        <!--<el-option-->
          <!--v-for="item in size"-->
          <!--:label="item.label"-->
          <!--:value="item.value">-->
        <!--</el-option>-->
      <!--</el-select>-->
    </div>
    <table class="el-table el-table--striped el-table--enable-row-hover" border="0" cellspacing="0">
      <thead>
      <tr>
        <slot name="thead"></slot>
      </tr>
      </thead>
      <tbody class="el-table__body">
      <slot name="tbody" :current="current"></slot>
      </tbody>
    </table>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    name: 'tableData',
    data () {
      return {
        current: [],
        size: [
          {label: this.$t('monitor.page', {num: 10}), value: 10},
          {label: this.$t('monitor.page', {num: 20}), value: 20},
          {label: this.$t('monitor.page', {num: 50}), value: 50},
          {label: this.$t('monitor.page', {num: 100}), value: 100},
          {label: this.$t('monitor.page', {num: 200}), value: 200},
          {label: this.$t('monitor.page', {num: 500}), value: 500},
          {label: this.$t('monitor.page', {num: 1000}), value: 1000}
        ],
        pagination: {
          pageSize: 20,
          count: 0,
          currentPage: 1
        }
      }
    },
    props: {
      allList: {type: Array, default: function () { return [] }},
      pageSize: {type: Number, default: 10},
      pageSizeChange: {
        type: Boolean,
        default: false
      }
      // header: {type: Array, default: function () { return [] }}
      // pagination: {type: Object, default: function () { return { pageSize: 10, count: 0, currentPage: 1 } }}
    },
    computed: {
    },
    components: {
      Pagination
    },
    methods: {
      // 每页显示条数改变后初始化
      sizeSelectChange () {
        this.pagination.currentPage = 1
        this.init()
      },
      handleCurrentChange (val) {
        this.pagination.currentPage = val || 1
        let size = this.pagination.pageSize || 10
        let end = Math.min(size * (val), this.pagination.count)
        this.current = this.allList.slice(size * (val - 1), end)
      },
      init () {
        this.pagination.count = this.allList.length
        // 最大页数
        let maxPage = Math.ceil(this.pagination.count / (this.pageSize || this.pagination.pageSize))
        if (this.pagination.currentPage > maxPage) {
          this.pagination.currentPage = maxPage
        }
        this.handleCurrentChange(this.pagination.currentPage)
      }
    },
    watch: {
      allList () {
        this.init()
      }
    },
    beforeMount () {
      this.init()
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .el-table
    overflow visible
  .pagination
    padding 8px 15px
  .page-wrap
    border 1px solid $c-border1
    border-bottom none
  .size-select
    margin-top 6px
    width 100px
</style>
